<template>
  <div class="buy_medicine_serve" v-show="kind == 1">
    <!-- 购药人信息 -->
    <div class="buyer_information">
      <p class="title_item">购药人信息</p>
      <div class="contacts_message">
        <div class="contacts_name">
          <p>联系人：</p>
          <input
            class="input_style"
            type="text"
            v-model.trim="listInfo.contectName"
          />
        </div>
        <div class="contacts_way">
          <p>联系方式：</p>
          <input
            class="input_style"
            type="text"
            v-model.trim="listInfo.contectWay"
          />
        </div>
      </div>
      <div class="get_medicine_message">
        <div class="get_medicine_way">
          <p>取药方式:</p>
          <div class="check_box1" @click="changeWays(1)">
            <img
              v-show="listInfo.chooseWay == 1"
              src="../../img/check.png"
              alt=""
            />
          </div>
          <p class="option_1">自提</p>
          <div class="check_box2" @click="changeWays(2)">
            <img
              v-show="listInfo.chooseWay == 2"
              src="../../img/check.png"
              alt=""
            />
          </div>
          <p class="option_2">快递</p>
        </div>
        <div class="get_medicine_date">
          <p>取药时间：</p>
          <input
            class="input_style"
            type="text"
            v-model.trim="listInfo.getMedicineDate"
          />
        </div>
      </div>
    </div>
    <!-- 药品清单 -->
    <div class="medicine_list">
      <p class="title_item">药品清单</p>
      <div class="medicine_message">
        <p>代购清单:</p>
        <textarea
          name="list"
          class="textarea_style"
          v-model.trim="listInfo.medicineList"
        ></textarea>
      </div>
    </div>
    <!-- 操作 -->
    <div class="operation_list">
      <button class="submit" @click="submit">提 交</button>
      <button class="back" @click="back">返 回</button>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  name: 'buyMedicineServe',
  props: {
    kind: {
      typeof: Number,
      default: 0,
    },
  },
  setup() {
    let initMessage = () => {
      return {
        contectName: '',
        contectWay: '',
        chooseWay: '',
        getMedicineDate: '',
        medicineList: '',
      }
    }
    let listInfo = reactive(initMessage())
    // 取药方式切换
    let changeWays = (value) => {
      if (listInfo.chooseWay == value) {
        listInfo.chooseWay = 0
      } else {
        listInfo.chooseWay = value
      }
    }
    let submit = () => {
      console.log(listInfo)
      Object.assign(listInfo, initMessage())
    }
    let back = () => {}
    let funTransition = ref('slide-left')
    return {
      listInfo,
      initMessage,
      changeWays,
      submit,
      back,
      funTransition,
    }
  },
}
</script>

<style lang="less" scope>
* {
  padding: 0;
  margin: 0;
}
.buy_medicine_serve {
  margin-left: 322px !important;
  width: 100%;
  margin-top: 84px !important;
  margin-bottom: 86px;
  background: #ffffff;
  font-size: 24px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  font-weight: 400;
  //  text-align: left;
  color: #2a3765;
  border-radius: 20px;
  box-shadow: 0px 0px 43px 3px #e5e5e5;
  .title_item {
    width: 170px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
    font-weight: 700;
    text-align: left;
    color: #3d4871;
    border-left: 4px solid #007bfd;
    padding-left: 16px;
  }
  .buyer_information {
    padding-top: 52px;
    padding-left: 60px;
    padding-right: 123px;
    .contacts_message {
      display: flex;
      margin-bottom: 39px;
      .contacts_name {
        display: flex;
        align-items: center;
        width: 50%;
        // margin-left: 3%;
        // margin-right: 15%;
        p {
          margin-right: 4%;
          text-align: right;
          margin-top: 18px;
          padding-left: 57px;
        }
      }
      .contacts_way {
        display: flex;
        align-items: center;
        width: 50%;
        p {
          padding-left: 8%;
          text-align: right;
          margin-top: 18px;
          margin-right: 4%;
        }
      }
    }
    .get_medicine_message {
      display: flex;
      margin-bottom: 39px;
      .get_medicine_way {
        display: flex;
        align-items: center;
        width: 50%;
        height: 51px;
        line-height: 51px;
        p:nth-child(1) {
          margin-right: 8%;
          margin-top: 21px;
          padding-left: 30px;
        }
        .check_box1,
        .check_box2 {
          width: 51px;
          height: 51px;
          background: #eef5fd;
          border: 1px solid #aad0f9;
          border-radius: 5px;
        }
        .check_box2 {
          margin-left: 10%;
        }
        .option_1,
        .option_2 {
          width: 10%;
          height: 24px;
          line-height: 24px;
          margin-left: 16px;
          margin-top: 35px;
        }
        img {
          width: 43px;
          height: 30px;
          margin-left: 3px;
        }
      }
      .get_medicine_date {
        display: flex;
        align-items: center;
        //margin-left: 12%;
        width: 50%;
        p {
          margin-right: 4%;
          padding-left: 8%;
          text-align: right;
          margin-top: 18px;
        }
      }
    }
  }
  .medicine_list {
    padding-top: 12px;
    padding-left: 60px;
    .medicine_message {
      display: flex;
      p {
        width: 104px;
        height: 24px;
        line-height: 24px;
        margin-top: 25px;
        margin-right: 36px;
        margin-left: 27px;
      }
    }
  }
  .operation_list {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 48px;
    padding-bottom: 53px;
  }
}

.input_style {
  background-color: #f5f9fe;
  width: 67%;
  height: 61px;
  font-size: 24px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  font-weight: 400;
  text-align: left;
  color: #2a3765;
  border: 1px solid #aad0f9;
}
input:focus,
textarea:focus {
  outline: 0;
  border: 3px solid #aad0f9;
}
.textarea_style {
  background-color: #f5f9fe;
  width: 80%;
  height: 178px;
  color: #2a3765;
  border: 1px solid #aad0f9;
}
.submit {
  width: 194px;
  height: 70px;
  background: #007afd;
  border-radius: 5px;
  border: 1px solid #007afd;
  box-shadow: 0px 1px 30px 0px rgba(98, 168, 244, 0.5);
  font-size: 30px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  margin-right: 56px;
}
.back {
  width: 195px;
  height: 71px;
  border: 1px solid #007afd;
  border-radius: 5px;
  font-size: 30px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  font-weight: 400;
  text-align: center;
  color: #007afd;
  background: #ffffff;
}
</style>
